import React from 'react'
import { Modal, Form, Icon, Input, Button } from 'antd'
import styles from './EditPassword.less'

const FormItem = Form.Item

class EditPassword extends React.PureComponent {
  state = {}

  handleSubmit = e => {
    e.preventDefault()
    const { form, handleSubmit } = this.props
    form.validateFields((err, payload) => {
      if (!err) {
        handleSubmit(payload)
      }
    })
  }

  render() {
    const { form, submitting = false, visible, handleCancel } = this.props
    const { getFieldDecorator } = form

    return (
      <Modal
        visible={visible}
        closable={false}
        footer={null}
        onCancel={() => handleCancel({visible: false})}
        width={350}
      >
      <Form onSubmit={this.handleSubmit} className={styles.loginForm}>
        <FormItem>
          {getFieldDecorator('current', {
            rules: [{ required: true, message: '请输入您的当前密码!' }],
          })(
            <Input prefix={<Icon type="user" className={styles.inputIcon} />} type="password" placeholder="请输入当前密码" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入您的新密码!' }],
          })(
            <Input prefix={<Icon type="lock" className={styles.inputIcon} />} type="password" placeholder="请输入新密码" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('confirm', {
            rules: [{ required: true, message: '请输入您的确认密码!' }],
          })(
            <Input prefix={<Icon type="lock" className={styles.inputIcon} />} type="password" placeholder="请输入确认密码" />
          )}
        </FormItem>
        <Button type="primary" htmlType="submit" loading={submitting} block>
          登录
        </Button>
      </Form>
    </Modal>
    )
  }
}

const WrappedEditPasswordForm = Form.create()(EditPassword)

export default WrappedEditPasswordForm